<template>
	<view>
		<uni-nav-bar statusBar fixed :backgroundColor="bgColor||'transparent'" :border="border" @clickLeft="clickLeft"
			@clickRight="clickRight">
			<block slot="left">
				<image src="/static/image/auth/back.png" style="width: 22px;" mode="widthFix">
				</image>
				<slot name="leftText"></slot>
			</block>
			<view class="title">{{title}}</view>
			<block slot="right">
				<text v-if="rightText">{{rightText}}</text>
				<slot name="rightText"></slot>
			</block>
		</uni-nav-bar>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			};
		},
		name: 'cu-custom',
		props: {
			border: {
				type: [Boolean, String],
				default: false
			},
			rightText: {
				type: String,
				default: ''
			},
			bgColor: {
				type: String,
				default: ''
			},
			title: {
				type: String,
				default: ''
			},
			goBack: {
				type: Function
			}

		},
		methods: {
			clickLeft() {
				if (typeof this.goBack === 'function') {
					this.goBack()
				} else {
					let canNavBack = getCurrentPages();
					if (canNavBack && canNavBack.length > 1) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						history.back();
					}
				}
			},
			clickRight() {
				this.$emit('clickRight')
			}
		}
	};
</script>

<style lang="less">
	.title {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: 20px;
		color: #fff;
	}
</style>